<template>
  <div id="app">
    <h2>测试题</h2>
    <SubjectItem v-for="(item,index) in list" :key="index" :num1="item.num1" :num2="item.num2"  @sumbmit="handleSumbmit($event,index)"></SubjectItem>
    <div>
    <FlagItem v-for="(item,index) in list" :key="index" :result="item.result" :inp="item.inp" :index="index"></FlagItem>
    </div>
  </div>
</template>

<script>
import SubjectItem from './components/SubjectItem.vue';
import FlagItem from './components/FlagItem.vue';
export default {
  components: {
    SubjectItem,
    FlagItem
  },
  data() {
    return {
    // result: '',
    // inp:'',
    list:[]
    }
  },
  mounted() {
    for (let i = 0; i < 5; i++ ){
          this.list.push({
            num1:Math.floor(Math.random() * 10) + 1,
            num2: Math.floor(Math.random() * 10) + 1,
            result: null,
            inp:null
  })
    }

  },
  methods: {
    handleSumbmit(e,index) {
      console.log(e); 
      if (e.result1===null) {
        return alert('没有输入答案')
      } else {
        this.list[index].result = e.isTrue;
        this.list[index].inp = e.result1;
    if (e.isTrue) {
      alert('提交成功')
    } else {
      alert('提交失败')
    }
      }
  
  }
}
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>